<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0 auto;
        font-family: "PingFang SC", "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 黑体, arial, STHeiti, 宋体;
        }

        a {
            font-size: 15px;
            color: rgb(80, 80, 80);
            text-decoration: none;
        }

        header {
            margin: -30px 0 -30px 0;
            position: absolute;
            width: 100%;
            background: whitesmoke;
            overflow: hidden;

        }

        #top_div {
            overflow: hidden;
            width: 100%;
            height: 90px;
            margin-bottom: -13px;
        }

        #top_div > img {
            margin-left: 40px;
            margin-top: 22px;
            margin-right: 38px;
            float: left;
            width: 170px;
            height: 46px;
        }

        ul {
            list-style-type: none;
        }

        ul > li {
            float: left;
        }

        #top_div > ul > li {
            margin-right: 30px;
            margin-top: 20px;
            margin-left: 10px;
            height: 72px;
            font-size: 18px;
        rgba(255, 255, 255, 1);
            float: left;
        }

        #top_div > input {
            margin-top: 20px;
        }

        #bottom_div > ul > li {
            margin-right: 30px;
            margin-top: 20px;
            margin-left: 25px;
            height: 72px;
            font-size: 18px;
        rgba(255, 255, 255, 1);
            float: left;
        }

        #bottom_div {
            margin-top: 0px;
            margin-left: 205px;
        }

        #bottom_div > ul > li {
            font-size: 15px;
        }

        .s1 > p {
            top: 20px;
            margin-top: 0;
            margin-left: 103px;
            font-size: 30px;
            font-weight: bold;
            letter-spacing: 4px;
            color: rgba(56, 56, 56, 1);
            padding-top: 135px;
            padding-left: 45%;
            position: relative;
        }

        .s1 > ul {
            margin-left: 31%;
        }

        .s1 > ul > li {
            width: 80px;
            height: 22px;
            font: 15px "PingFang SC", "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 黑体, arial, STHeiti, 宋体;
            margin-right: 33px;
            position: relative;
            top: 11px;
        }
        .s1>div>div{
            border: 2px solid red;
            float: left;
        }
        .s1>div>div>img{
            width: 224px;
            height: 224px;
        }
    </style>
</head>
<body>
<div>
    <header>
        <div id="top_div">
            <img src="https://img.xiaopiu.com/userImages/img35916165fa29c8.png" alt="">
            <ul>
                <li><a href="">音乐馆</a></li>
                <li><a href="">我的音乐</a></li>
                <li><a href="">客户端</a></li>
                <li><a href="">公众号</a></li>
                <li><a href="">VIP</a></li>
            </ul>
            <input type="text" placeholder="搜索音乐、歌单、用户">
        </div>
        <div id="bottom_div">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">歌手</a></li>
                <li><a href="">专辑</a></li>
                <li><a href="">排行榜</a></li>
                <li><a href="">分类歌单</a></li>
                <li><a href="">电台</a></li>
                <li><a href="">MV</a></li>
            </ul>
        </div>
    </header>
    <section>
        <div class="s1">
            <p>歌单推荐</p>
            <ul>
                <li><a href="">为你推荐</a></li>
                <li><a href="">年度盘点</a></li>
                <li><a href="">劲爆DJ</a></li>
                <li><a href="">粤语精选</a></li>
                <li><a href="">情歌</a></li>
                <li><a href="">热门游戏</a></li>
            </ul>
            <div>
                <div>
                    <img src="https://img.xiaopiu.com/userImages/img2781161d0712ef0.jpeg" alt="">
                    <br>
                    <a href="">每日新歌:蛇叔阿拉伯风尽显性格</a>
                    <br>
                    <span>播放量:7.3万</span>
                </div>
                <div>
                    <img src="https://img.xiaopiu.com/userImages/img2782161d07184e0.jpeg" alt="">
                    <br>
                    <a href="">电音狂潮:吹散你假期的慵懒</a>
                    <br>
                    <span>播放量:3.8万</span>
                </div>
                <div>
                    <img src="https://img.xiaopiu.com/userImages/img2783161d072a9d8.jpeg" alt="">
                    <br><a href="">Future bass | 迷醉于怦然心动的音</a><br>
                    <span>播放量:119.4万</span>
                </div>
                <div>
                    <img src="https://img.xiaopiu.com/userImages/img2814161d0b884a8.jpeg" alt="">
                    <br><a href="">一日男友 | 跟理想型男友谈恋爱是什么感觉</a><br>
                    <span>播放量:28.1万</span>
                </div>
                <div>
                    <img src="https://img.xiaopiu.com/userImages/img2817161d0ba8848.jpeg" alt="">
                    <br><a href="">纯电子 | Enhanced Recordings</a><br>
                    <span>播放量:7.8万</span>
                </div>
            </div>
        </div>
        <!--    <div class="s2">-->
        <!--        <p>新歌首发</p>-->
        <!--        <ul>-->
        <!--            <li><a href="">内地</a></li>-->
        <!--            <li><a href="">港台</a></li>-->
        <!--            <li><a href="">欧美</a></li>-->
        <!--            <li><a href="">日本</a></li>-->
        <!--            <li><a href="">韩国</a></li>-->
        <!--        </ul>-->
        <!--    </div>-->
        <!--    <div class="s3">-->
        <!--        <p>精彩推荐</p>-->
        <!--&lt;!&ndash;        <img src="https://img.xiaopiu.com/userImages/img2942161d12c7070.jpg" alt="">&ndash;&gt;-->
        <!--&lt;!&ndash;        <img src="https://img.xiaopiu.com/userImages/img2945161d13169e0.jpg" alt="">&ndash;&gt;-->
        <!--    </div>-->
        <!--    <div class="s4">-->
        <!--        <p>排行榜</p>-->
        <!--        <img src="" alt="">-->
        <!--        <img src="" alt="">-->
        <!--        <img src="" alt="">-->
        <!--        <img src="" alt="">-->
        <!--        <img src="" alt="">-->
        <!--    </div>-->
        <!--    <div class="s5">-->
        <!--        <p>MV</p>-->
        <!--        <ul>-->
        <!--            <li><a href="">精选</a></li>-->
        <!--            <li><a href="">内地</a></li>-->
        <!--            <li><a href="">韩国</a></li>-->
        <!--            <li><a href="">欧美</a></li>-->
        <!--            <li><a href="">日本</a></li>-->
        <!--            <li><a href="">港台</a></li>-->
        <!--        </ul>-->
        <!--    </div>-->
    </section>
    <footer>
        <div></div>
    </footer>
</div>
</body>
</html>